<template>
	<view class="tabs">
		<view class="header">
			<div class="nav">
				<span v-for="(item, key) in navList" :key="key" :class="key == Index ? 'active' : ''">{{ item.name }}</span>
			</div>
			<div class="search">
				<image src="../../static/image/search.png" mode=""></image>
			</div>
		</view>
		<view class="content">
			<swiper class="lunbo" :current="Index" @change="tabBalEvent($event)">
				<swiper-item v-for="(item, key) in navList" :key="key" height="300rpx">
					<scroll-view class="content-i" scroll-y="true" :scroll-top="Index" @scrolltoupper="upper" @scrolltolower="lower">
						<Common v-for="(i, k) in dataList" :dataList="i"></Common>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import Common from '../../components/index/common.vue'
	import { getUserInfo } from '@/components/utils/common.js'
	
	export default {
		components: {
			Common
		},
		data() {
			return {
				getIndexDataUrl: 'index.php',
				getIndexNavUrl: 'indexNav.php',
				params: uni.getStorageSync('Token'),
				navList: [],
				Index: 1,
				dataList: []
			}
		},
		methods: {
			async states (url, params, type) {
				let that = this
				const { data: res } = await that.$myHttp({ // 获取公钥
					url: url,
					data: params,
				})
				if (type === 'nav') {
					that.navList = res.Data.nav
				} else if (type === 'indexData') {
					that.dataList = res.Data.list
				}
			},
			// 获取首页导航
			getNav () {
				let that = this
				that.states(that.getIndexNavUrl, that.params, 'nav')
			},
			// 获取首页数据
			getIndexData () {
				let that = this
				that.$set(that.params, 'Index', that.Index)
				that.states(that.getIndexDataUrl, that.params, 'indexData')
			},
			tabBalEvent (e) {
				let that = this
				that.Index = e.target.current
				that.$set(that.params, 'Index', that.Index)
				this.states(that.getIndexDataUrl, that.params, 'indexData')
			},
			upper (e) {
				// console.log(e)
			},
			lower (e) {
				// console.log(e)
			},
			scroll (e) {
				this.old.scrollTop = e.detail.scrollTop
			}
		},
		created () {
			this.getNav()
			this.getIndexData()
		}
	}
</script>

<style scoped>
	.tabs {
		font-size: 14px;
		line-height: 24px;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top:1vh;
		/* 下面样式在设置在app端*/
		//#ifdef APP-PLUS
		padding-top:4vh;
		//#endif
	}
	.header{
		display: flex;
		width: 710rpx;
		height: 80rpx;
	}
	.header .nav{
		flex: 1;
		line-height: 80rpx;
		display: flex;
		justify-content: space-around;
	}
	.header .nav .active{
		color: #007AFF;
		font-size: 20px;
		line-height: 74rpx;
	}
	.header .search{
		width: 30rpx;
		height: 30rpx;
		margin-top: 20rpx;
		margin-right: 20rpx;
	}
	.header .search image{
		width: 100%;
		height: 100%;
	}
	.content{
		height: auto;
	}
	.lunbo{
		height: 89vh;
	}
	.content-i{
		height: 100%;
		width: 100%;
	}
</style>
